<template>
	<div>
		<detail-banner
			:sightName="sightName"
			:bannerImg="bannerImg"
			:bannerImgs="gallaryImgs"
		></detail-banner>
		<detail-header></detail-header>
		<div class="content">
			<detail-list :list="list"></detail-list>
		</div>
	</div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
  	DetailBanner,
  	DetailHeader,
  	DetailList
  },
  data () {
  	return {
  		sightName: '',
  		bannerImg: '',
  		gallaryImgs:[],
  		list:[]
//		list: [{
//			title: '成人票',
//			children: [{
//				title: '成人三管联票',
//				children: [{
//					title: '成人三管联票-哈哈哈',
//				}]
//			},{
//				title: '成人三五管联票'
//			}]
//		},{
//			title: '学生票'
//		},{
//			title: '儿童票'
//		},{
//			title: '特价票'
//		}]
  	}
  },
  methods: {
  		getDetailInfo () {
  			axios.get('/static/mock/detail.json', {
  				params: {
  					id:this.$route.params.id
  				}
  			}).then(this.handleGetDataSucc)
  		},
  		handleGetDataSucc (res) {
  			res = res.data
  			if (res.ret && res.data) {
  				const data = res.data
  				this.sightName = data.sightName
  				this.bannerImg = data.bannerImg
  				this.galleryImgs = data.gallaryImgs
  				this.list = data.categoryList
//				console.log(data)
  			}
  		}
  	},
  	mounted () {
  		this.getDetailInfo()
  	}
}
</script>

<style lang="stylus" scoped>
	.content{
		height: 50rem;
	}
</style>